<!DOCTYPE html>
<html lang="zh-CN" class="no-js" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>RainMan</title>
  <meta name="description" content="Let the rain sing you a lullaby. Sound of rain for sleeping or studying." />
  <meta name="keywords" content="thunderstorm, ambient rain, raindrops, rain sound, rain noise, white noise" />
  <meta name="robots" content="index, follow" />
  <link rel="icon" href="img/fav/favicon.png" sizes="32x32" type="image/png" />

  <!-- Google fonts -->
  <link rel="preconnect" href="https://fonts.gstatic.com" />
  <link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet" />

  <!-- normalize.css + demo.css + style1.css + slider.css + pater.css -->
  <link rel="stylesheet" type="text/css" href="css/index.css" />
</head>

<body class="demo-1">
  <!-- player begins -->
  <audio id="1" src="https://static.ilovecats.cn/rain_man/audio/rainyscope.com/rainbest160.mp3" autoplay loop></audio>
  <audio id="2" src="https://static.ilovecats.cn/rain_man/audio/rainyscope.com/splashing-rainfall160.mp3" loop></audio>
  <audio id="3" src="https://static.ilovecats.cn/rain_man/audio/rainyscope.com/birds160.mp3" loop></audio>
  <audio id="4" src="https://static.ilovecats.cn/rain_man/audio/rainyscope.com/snow.mp3" loop></audio>
  <audio id="5" src="https://static.ilovecats.cn/rain_man/audio/rainyscope.com/thunder160.mp3" loop></audio>

  <div class="image-preload">
    <img src="img/drop-color.png" alt="" />
    <img src="img/drop-alpha.png" alt="" />
    <img src="img/weather/texture-rain-fg.png" alt="" />
    <img src="img/weather/texture-rain-bg.jpg" alt="" />
    <img src="img/weather/texture-sun-fg.png" alt="" />
    <img src="img/weather/texture-sun-bg.jpg" alt="" />
    <img src="img/weather/texture-sun-2fg.png" alt="" />
    <img src="img/weather/texture-sun-2bg.jpg" alt="" />
    <img src="img/weather/texture-fallout-fg.png" alt="" />
    <img src="img/weather/texture-fallout-bg.jpg" alt="" />
    <img src="img/weather/texture-drizzle-fg.png" alt="" />
    <img src="img/weather/texture-drizzle-bg.jpg" alt="" />
  </div>

  <div class="container">
    <div class="overlay"></div>

    <div id="righter">
      <a href="javascript:;" id="hideui"><span class="hider">hide</span> ui</a>
    </div>

    <div class="slideshow">
      <canvas width="1" height="1" id="container"></canvas>
      <!-- Best Rain -->
      <div class="slide" id="slide-1" data-weather="rain"></div>
      <!-- Drizzle -->
      <div class="slide" id="slide-2" data-weather="drizzle"></div>
      <!-- Sunny -->
      <div class="slide" id="slide-3" data-weather="sunny"></div>
      <!-- Fallout (greenish overlay with slightly greenish/yellowish drops) -->
      <div class="slide" id="slide-4" data-weather="fallout"></div>

      <nav class="slideshow__nav hider">
        <a class="nav-item nav-bg" href="#slide-1" onclick="aud_play_pause('1')"><i
            class="icon icon--rainy"></i><span>Summer</span></a>
        <a class="nav-item nav-bg" href="#slide-2" onclick="aud_play_pause('2')"><i
            class="icon icon--drizzle"></i><span>Autumn</span></a>
        <a class="nav-item nav-bg" href="#slide-3" onclick="aud_play_pause('3')"><i
            class="icon icon--sun"></i><span>Canicule</span></a>
        <a class="nav-item nav-bg" href="#slide-4" onclick="aud_play_pause('4')"><i
            class="icon icon--winter"></i><span>Winter</span></a>
        <a class="nav-item nav-bg" href="#slide-5" onclick="aud_play_pause('5')"><i
            class="icon icon--storm"></i><span>Spring</span></a>
      </nav>
    </div>
    <p class="nosupport">Sorry, but your browser does not support WebGL!</p>
  </div>
  <!-- /container -->

  <!-- Volume slider -->
  <div class="speaker hider">
    <svg viewBox="0 0 100 77" xmlns="http://www.w3.org/2000/svg">
      <path id="speakB" class="volElem" stroke="#ffffff"
        d="M51.2,18.5v-13c0-2.1-2.5-3.3-4.1-1.9L21.8,25.9c-1.4,1.2-3.1,1.9-4.9,1.9H8.2c-2.3,0-4.2,1.9-4.2,4.2v13.3c0,2.3,1.9,4.2,4.2,4.2H17c1.9,0,3.7,0.7,5.1,1.9l25,22c1.6,1.4,4.1,0.3,4.1-1.9v-13"
        opacity="0.4" />
      <path id="speakF" class="volElem" stroke="#ffffff"
        d="M51.2,18.5v-13c0-2.1-2.5-3.3-4.1-1.9L21.8,25.9c-1.4,1.2-3.1,1.9-4.9,1.9H8.2c-2.3,0-4.2,1.9-4.2,4.2v13.3c0,2.3,1.9,4.2,4.2,4.2H17c1.9,0,3.7,0.7,5.1,1.9l25,22c1.6,1.4,4.1,0.3,4.1-1.9v-13" />
      <path id="arcBigB" class="volElem" stroke="#ffffff"
        d="M72.2,64.1C81.1,59,87,49.4,87,38.5c0-10.9-5.9-20.5-14.8-25.6" opacity="0.4" />
      <path id="arcBigF" class="volElem" stroke="#ffffff"
        d="M72.2,64.1C81.1,59,87,49.4,87,38.5c0-10.9-5.9-20.5-14.8-25.6" />
      <path id="arcSmB" class="volElem" stroke="#ffffff" d="M59,51.3c4.4-2.6,7.4-7.4,7.4-12.8s-3-10.3-7.4-12.8"
        opacity="0.4" />
      <path id="arcSmF" class="volElem" stroke="#ffffff" d="M59,51.3c4.4-2.6,7.4-7.4,7.4-12.8s-3-10.3-7.4-12.8" />
      <line id="crossLtRb" class="volElem" opacity="0.6" stroke="#ffffff" x1="43.8" y1="29.2" x2="62.6" y2="47.8"
        transform="scale(0)" />
      <line id="crossLbRt" class="volElem" opacity="0.6" stroke="#ffffff" x1="62.6" y1="29.2" x2="43.8" y2="47.8"
        transform="scale(0)" />
    </svg>
  </div>
  <div class=""></div>
  <div class="vlCtrl hider">
    <svg viewBox="0 0 280 27" xmlns="http://www.w3.org/2000/svg">
      <line id="ctrlLineB" class="volElem" stroke="#ffffff" x1="13" y1="13.5" x2="261.2" y2="13.5" opacity="0.4" />
      <line id="ctrlLineF" class="volElem" stroke="#ffffff" x1="13" y1="13.5" x2="261.2" y2="13.5" />
      <circle id="ctrlCirce" cx="261.2" cy="13.5" r="13" fill="#ffffff" />
    </svg>
  </div>

  <script src="https://cdn.jsdelivr.net/jquery/2.2.4/jquery.min.js"></script>
  <!-- sound script by leke: www.webdeveloper.com/forum/showthread.php?276447-lt-audio-gt-stop%28%29-playing-all-other-instances -->
  <script>
    ids = new Array(5) // an array with total number of ids
    var active_id = 0
    function aud_play_pause(idNumber) {
      var idNumber = document.getElementById(idNumber)

      for (var i = 0; i < ids.length; i++) {
        document.getElementById(i + 1).pause() // Pause all ids before playing next file.
        document.getElementById(i + 1).currentTime = 0 // Set the time back to zero, else it will replay from the pause point.
      }
      active_id = idNumber
      idNumber.play()
    }

    active_id = document.getElementById('1')

    $('#hideui').click(function () {
      $('.hider').toggleClass('nonvisibl')
    })
  </script>

  <script src="js/index.min.js"></script>
  <script src="slider/index.js"></script>
</body>

</html>